<template>
	<pager @loadData="loadData" ref="pager" :checkNetwork="false">
		<view class="w100 h100vh flex flex-col align-c justify-b safe-bottom">
			<view class="loginForm">
				<view class="flex flex-row align-c justify-b phoneInput">
					<view class="flex-shrink" style="margin-right: 16rpx;"><icon-font name="zhcc_shoujihao"
							color="#bbbbbb" size="48rpx"></icon-font></view>
					<u-input type="number" maxlength="11" class="flex-sub inputTxt" placeholder="输入手机号"
						v-model="formData.mobile" :custom-style="{
							color: '#ffffff',
							background: '#ffffff00'
						}" />
				</view>
				<view class="flex flex-row align-c justify-b phoneCode">
					<view class="flex-shrink" style="margin-right: 16rpx;"><icon-font name="duanxinyanzhengma"
							color="#bbbbbb" size="48rpx"></icon-font></view>
					<u-input type="number" maxlength="6" class="flex-sub inputTxt" placeholder="输入验证码"
						v-model="formData.captcha" :custom-style="{
							color: '#ffffff',
							background: '#ffffff00'
						}" />
					<view class="flex-shrink">
						<view class="codeBtn wait" v-if="isSendCaptcha">{{ countSeconds }}秒后可重新获取</view>
						<view class="codeBtn" @click="sendSmsCaptcha" v-else>获取短信验证码</view>
					</view>
				</view>
				<view class="loginBtn">
					<u-button type="primary" :customStyle="{
						fontSize: '32rpx !important',
						fontWeight: 'initial',
						width: '100%',
						height: '100rpx',
						background: 'linear-gradient(180deg, #427DF7 0%, #0B51E4 100%)',
						borderRadius: '50rpx',
					}" @click="checkLogin()" shape="circle" size="default" :ripple="true" :throttle-time="1000">
						登录
					</u-button>
				</view>
			</view>
			<view @click="showService" class="w100 footer flex flex-col align-c justify-c">
				<view class="flex flex-row align-c">
					<text class="txt1">登录即代表您已经同意了互邦轮椅</text>
					<text class="txt2">《服务协议》</text>
				</view>
				<!-- <view class="txt3">未注册过的用户将直接为您创建围老账户</view> -->
			</view>
		</view>
	</pager>
</template>

<script>
	import Vue from 'vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				formData: {
					mobile: '',
					captcha: ''
				},
				isSendCaptcha: false,
				countSeconds: 0,
				sendCaptchaTime: 60
			};
		},
		computed: {
			...mapState({
				lastSendCaptchaTimestamp: ({
					app
				}) => app.lastSendCaptchaTimestamp
			})
		},
		mounted() {
			const vm = this;
			if (vm.$store.getters.appConfig) {
				vm.sendCaptchaTime = vm.$store.getters.appConfig.sendCaptchaTime > 0 ? vm.$store.getters.appConfig
					.sendCaptchaTime : 60;
			}
			vm.countSeconds = parseInt(vm.sendCaptchaTime - (vm.$utils.timestamp() - vm.lastSendCaptchaTimestamp));
			console.log('获取验证码等待时间：' + vm.countSeconds);
			if (vm.countSeconds > 0) {
				vm.isSendCaptcha = true;
				vm.countDownTime();
			}
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			showService() {
				const vm = this;
				vm.$utils.openWebview('https://agedmall.ejiakanghu.cn/service_word/', '服务协议');
			},
			countDownTime() {
				const vm = this;
				setTimeout(() => {
					vm.countSeconds--;
					if (vm.countSeconds > 0) {
						vm.isSendCaptcha = true;
						vm.countDownTime();
					} else {
						vm.isSendCaptcha = false;
						vm.countSeconds = 0;
					}
				}, 1000);
			},
			sendSmsCaptcha() {
				const vm = this;

				if (vm.$utils.isEmpty(vm.formData.mobile)) {
					vm.$utils.showToast('请输入手机号码');
					return;
				} else if (!vm.$utils.isMobile(vm.formData.mobile)) {
					vm.$utils.showToast('请输入有效的手机号码');
					return;
				}

				vm.$api
					.getSMSCaptcha(vm.formData.mobile)
					.then(res => {
						vm.$store.commit('app/saveLastSendCaptchaTimestamp', vm.$utils.timestamp());
						vm.countSeconds = vm.sendCaptchaTime;
						vm.isSendCaptcha = true;
						vm.countDownTime();
						vm.$utils.showToast('获取短信验证码成功，请注意查收短信');
					})
					.catch(error => {
						vm.$utils.showToast(error);
					});
			},
			checkboxChange(e) {
				const vm = this;
				vm.isChecked = e.detail.value.length > 0;
			},
			checkLogin() {
				const vm = this;

				if (vm.$utils.isEmpty(vm.formData.mobile)) {
					vm.$utils.showToast('请输入手机号码');
					return;
				} else if (!vm.$utils.isMobile(vm.formData.mobile)) {
					vm.$utils.showToast('请输入有效的手机号码');
					return;
				} else if (vm.$utils.isEmpty(vm.formData.captcha)) {
					vm.$utils.showToast('请输入验证码');
					return;
				} else if (vm.formData.captcha.length != 6) {
					vm.$utils.showToast('请输入6位数字验证码');
					return;
				}

				vm.$utils
					.getWechatLoginOAuthCode()
					.then(loginRes => {
						vm.login(loginRes.code);
					})
					.catch(error => {
						console.log(error)
						vm.$utils.showToast(error);
					});
			},
			login(code) {
				const vm = this;
				vm.$api
					.mobileLogin(vm.formData.mobile, vm.formData.captcha, code)
					.then(res => {
						console.log(res);
						res.data.userInfo.token = res.data.token;
						vm.$store.commit('app/saveUserInfo', res.data.userInfo);
						vm.$utils.showToast('登录成功');
						uni.$emit('LOGIN_SUCCESS');
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 500);
					})
					.catch(error => {
						console.log(error);
						vm.$utils.showToast(error);
					});
			}
		}
	};
</script>
<style lang="scss">
	/deep/ .u-btn {
		height: 88rpx !important;
		font-size: 32rpx !important;
		font-weight: bold;
	}

	.loginForm {
		width: 100%;
		margin-top: 120rpx;
		padding: 0 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32rpx;
	}

	.inputTxt {
		background-color: transparent;
		padding: 10rpx 0rpx;
		min-height: inherit !important;
		height: auto !important;
	}

	.phoneInput {
		width: 100%;
		margin-bottom: 40rpx;
		border-bottom: 1px solid #bbbbbb;
	}

	.phoneCode {
		width: 100%;
		margin-bottom: 40rpx;
		border-bottom: 1px solid #bbbbbb;
	}

	.codeBtn {
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #ffffff;
		padding: 12rpx 30rpx;
		background: #4CAF50;
		border-radius: 30rpx;
	}

	.loginBtn {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		width: 100%;
	}

	.voice-captcha {
		padding: 20rpx;
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-size: 28rpx;
		color: #999999;
	}

	.voice-captcha .send {
		font-weight: bold;
		color: #fa963d;
	}

	.voice-captcha .send-wait {
		font-weight: bold;
		color: #dddddd;
	}

	.wait {
		background-color: #666666 !important;
		color: #bbbbbb;
	}

	.footer {
		padding-bottom: 60rpx;
		font-size: 24rpx;

		.txt1 {
			color: #999999;
		}

		.txt2 {
			color: #2196F3;
		}

		.txt3 {
			margin-top: 10rpx;
			color: #999999;
		}
	}
</style>